<!--
 * @Description: 
 * @Author: 【大白菜】2601779853@qq.com
 * @Date: 2023-07-31 10:03:28
 * @LastEditTime: 2023-08-02 10:06:56
 * @LastEditors: 【大白菜】2601779853@qq.com
-->
<template>
  <div class="page">
    <el-form :model="ruleForm" ref="ruleForm" label-width="180px">
      <el-card>
        <h3>一般设置</h3>
        <el-tabs v-model="baseActiveName" type="border-card">
          <el-tab-pane label="基本设置" name="first">
            <el-row>
              <el-col :span="12">
                <el-form-item label="状态：">
                  <el-tag type="primary" size="small">br-lan</el-tag>
                </el-form-item>
                <el-form-item label="运行时间：">
                  <span>15d 14h 56m 14s</span>
                </el-form-item>
                <el-form-item label="MAC-地址：">
                  <span>20:21:33:25:10:49</span>
                </el-form-item>
                <el-form-item label="接收：">
                  <span>229.73 MB (2613843 数据包)</span>
                </el-form-item>
                <el-form-item label="发送：">
                  <span>139.74 MB (1478136 数据包)</span>
                </el-form-item>
                <el-form-item label="IPv4：">
                  <span>192.168.10.1/24</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通讯协议" prop="agreement">
                  <el-select v-model="ruleForm.agreement" placeholder="请选择通讯协议">
                    <el-option label="静态地址" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="IPv4地址" prop="ipAddress">
                  <IPAddress v-model="ruleForm.ipAddress" />
                </el-form-item>
                <el-form-item label="IPv4子网掩码" prop="ipChild">
                  <el-select v-model="ruleForm.ipChild" filterable allow-create default-first-option
                    placeholder="请选择IPv4子网掩码">
                    <el-option label="255.255.255.0" value="shanghai"></el-option>
                    <el-option label="255.255.0.0" value="255.255.0.0"></el-option>
                    <el-option label="255.0.0.0" value="255.0.0.0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

          </el-tab-pane>
          <el-tab-pane label="高级设置" name="second">
            <el-row>
              <el-col :span="12">
                <el-form-item label="IPv4网关" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入IPv4网关"></el-input>
                </el-form-item>
                <el-form-item label="使用自定义的DNS服务器">
                  <!-- :rules="{
                      required: true, message: 'DNS服务器不能为空', trigger: 'blur'
                    }" -->
                  <el-form-item v-for="(dns, index) in ruleForm.dnsList" :key="dns.key"
                    :prop="'dnsList.' + index + '.value'" >
                    <div class="l-f l-mg-bottom20">
                      <el-input v-model="dns.value"></el-input>
                      <el-button class="l-mg-left20" @click.prevent="removeDns(dns)" type="danger" icon="el-icon-delete"
                        circle size="mini"></el-button>
                    </div>
                  </el-form-item>
                  <div>
                    <el-button @click.prevent="addDns" type="primary" icon="el-icon-plus" size="mini">添加</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="克隆MAC地址" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入克隆MAC地址"></el-input>
                </el-form-item>
                <el-form-item label="设置MTU" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入设置MTU"></el-input>
                </el-form-item>
                <el-form-item label="使用网关跃点" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入使用网关跃点"></el-input>
                </el-form-item>
                <el-form-item label="IPv4广播" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入IPv4广播"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-card class="l-mg-top20">
        <h3>DHCP服务器</h3>
        <el-tabs v-model="dhcpActiveName" type="border-card">
          <el-tab-pane label="基本设置" name="first">
            <el-row>
              <el-col :span="12">
                <el-form-item label="关闭DHCP" prop="agreement">
                  <el-switch v-model="ruleForm.switch">
                  </el-switch>
                  <el-tooltip class="item" effect="dark" content="禁用本接口的DHCP。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <template v-if="!ruleForm.switch">
                  <el-form-item label="开始" prop="agreement">
                  <el-input-number v-model="ruleForm.name" :min="0" :max="999999999"
                    placeholder="请输入开始"></el-input-number>
                  <el-tooltip class="item" effect="dark" content="网络地址的起始分配基址。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="客户数" prop="agreement">
                  <el-input-number v-model="ruleForm.name" :min="0" :max="999999999"
                    placeholder="请输入客户数"></el-input-number>
                  <el-tooltip class="item" effect="dark" content="最大地址分配数量。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="租用时间" prop="agreement">
                  <el-input v-model="ruleForm.name" style="width: 80%" placeholder="请输入开始"></el-input>
                  <el-tooltip class="item" effect="dark" content="地址租期，最小2分钟(2m)。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                </template>
                
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="高级设置" name="second">
            <el-row v-if="!ruleForm.switch">
              <el-col :span="12">
                <el-form-item label="动态DHCP" prop="agreement">
                  <el-checkbox v-model="ruleForm.checked"></el-checkbox>
                  <el-tooltip class="item" effect="dark" content="动态分配DHCP地址。如果禁用，则只能为静态租用表中的客户端提供网络服务。"
                    placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="强制开启DHCP" prop="agreement">
                  <el-checkbox v-model="ruleForm.checked"></el-checkbox>
                  <el-tooltip class="item" effect="dark" content="强制开启DHCP。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <el-form-item label="IPv4-子网掩码" prop="agreement">
                  <el-input v-model="ruleForm.name" placeholder="请输入IPv4广播" style="width: 80%;"></el-input>
                  <el-tooltip class="item" effect="dark" content="更新子网掩码。" placement="right">
                    <i class="el-icon-warning"></i>
                  </el-tooltip>
                </el-form-item>
                <!-- :rules="{
                      required: true, message: 'DHCP-选项不能为空', trigger: 'blur'
                    }" -->
                <el-form-item label="DHCP-选项">
                  <el-form-item v-for="(dhcp, index) in ruleForm.dhcpList" :key="dhcp.key"
                    :prop="'dhcpList.' + index + '.value'" >
                    <div class="l-f l-mg-bottom20">
                      <el-input v-model="dhcp.value"></el-input>
                      <el-button class="l-mg-left20" @click.prevent="removeDhcp(dhcp)" type="danger" icon="el-icon-delete"
                        circle size="mini"></el-button>
                    </div>
                  </el-form-item>
                  
                  <div>
                    <el-button @click.prevent="addDhcp" type="primary" icon="el-icon-plus" size="mini">添加</el-button>
                  </div>
                  <div style="font-size: 12px;color: #999999;">
                    设置DHCP的附加选项，例如设定"6,192.168.2.1,192.168.2.2"表示通告不同的DNS服务器给客户端。
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-form>
    <div class="l-f l-row-c l-mg-top30">
      <el-button type="primary" @click="submitForm('ruleForm')">保存&应用</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
      <el-button type="primary">复 位</el-button>
    </div>
  </div>
</template>

<script>
import IPAddress from '@/components/IPAddress/index.vue'
export default {
  components: {
    IPAddress
  },
  data() {
    return {
      baseActiveName: 'first',
      dhcpActiveName: 'first',
      ruleForm: {
        name: '',
        agreement: '',
        ipAddress: '',
        ipChild: '',
        dnsList: [{
          value: ''
        }],
        switch: false,
        checked: false,
        dhcpList: [
          {
            value: ''
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    removeDns(item) {
      var index = this.ruleForm.dnsList.indexOf(item)
      if (index !== -1) {
        this.ruleForm.dnsList.splice(index, 1)
      }
    },
    addDns() {
      this.ruleForm.dnsList.push({
        value: '',
        key: Date.now()
      });
    },
    removeDhcp(item) {
      var index = this.ruleForm.dhcpList.indexOf(item)
      if (index !== -1) {
        this.ruleForm.dhcpList.splice(index, 1)
      }
    },
    addDhcp() {
      this.ruleForm.dhcpList.push({
        value: '',
        key: Date.now()
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>